<template lang="html">
    <div class="" id="platformUser">
        <!-- 搜索栏 -->
        <div class="m-search-box">
            <el-form ref="searchItem" :model="searchItem" :inline="true"  class="demo-form-inline">
                <el-form-item label="用户名" class="search-item" prop="name">
                    <el-input v-model="searchItem.name" placeholder="用户名"></el-input>
                </el-form-item>
                <!-- <el-form-item label="状态" prop="state">
                    <el-select  v-model="searchItem.state" placeholder="项目状态">
                        <el-option label="全部" value="all"></el-option>
                        <el-option label="正常" value="normal"></el-option>
                        <el-option label="锁定" value="lock"></el-option>
                    </el-select>
                </el-form-item> -->
                <el-form-item>
                    <el-button type="primary" icon="fa-search" @click="loadData(searchItem.name, pageNum, pageSize)">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button icon="fa-repeat" @click="resetForm('searchItem')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>

        <!-- 操作按钮 -->
        <div class="operate-btn">
            <el-button type="primary" icon="fa-plus" @click="openDislog('', '', 'new')">新建</el-button>
            <!-- <el-button type="primary" icon="fa-unlock">解锁</el-button> -->
        </div>
        <!-- 列表 -->
        <div class="table-box">
            <el-table
                ref="multipleTable"
                :data="tableData"
                border
                tooltip-effect="dark"
                style="width: 100%"
                >
                <el-table-column
                    align="center"
                    prop="name"
                    label="用户名"
                    >
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="phone"
                    label="手机号码"
                    >
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="email"
                    label="电子邮件"
                    >
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="updateTime"
                    label="修改时间"
                    >
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="roleName"
                    label="角色"
                    >
                    <template scope="scope">
                        <el-dropdown
                        :hide-on-click = 'false'
                        menu-align ='start'
                        trigger = 'hover'
                        >
                            <span class="el-dropdown-link">
                                {{scope.row.roleName?scope.row.roleName:'编辑角色'}}<i class="el-icon-caret-bottom el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown" >
                                <el-dropdown-item v-for="(item, index) in roleList" :key="index" :command="item.name">
                                    <div @click="handleCommand(item, scope.row)">{{ item.name }}</div>
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="del"
                    label="操作"
                    width="160"
                    >
                    <template scope="scope" class="el-g-tbn">
                        <div class="el-g-tbn">
                            <el-button type="primary" icon="edit" size="mini" @click="openDislog(scope.$index, scope.row, 'edit')">编辑</el-button>
                            <el-button type="danger" icon="fa-trash-o" size="mini" @click="delItem(scope.$index, scope.row)">删除</el-button>
                        </div>
                    </template>
                </el-table-column>
                <!-- <el-table-column
                    prop="state"
                    label="状态"
                    >
                </el-table-co lumn> -->
            </el-table>
        </div>
        <!--分页-->
        <div class="page">
            <el-pagination
                :current-page="pageNum"
                :page-sizes="[10, 30, 45]"
                :page-size="pageSize"
                layout="prev, pager, next, total, sizes"
                :total="total"
                @current-change="currentChange"
                @size-change="sizeChange"
                >
            </el-pagination>
        </div>

        <!-- 弹窗表单 -->
        <el-dialog :visible.sync="dialog" class="dialog" top="20%">
            <template slot="title"><span>{{this.editType}}</span></template>
            <el-form label-width="90px" :model="dialogData" class="dialogForm" :inline="true" :rules="fules" ref="dialogForm">
                <el-form-item label="用户名" prop="name">
                    <el-input v-model="dialogData.name"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password" v-if="this.editType === '新建'">
                    <el-input v-model="dialogData.password"></el-input>
                </el-form-item>
                <el-form-item label="手机号码" prop="phone"  v-if="this.editType === '新建'">
                    <el-input v-model.number="dialogData.phone"></el-input>
                </el-form-item>
                <el-form-item label="电子邮件" prop="email">
                    <el-input v-model="dialogData.email"></el-input>
                </el-form-item>
                <el-form-item label="身份证" prop="cardId">
                    <el-input v-model="dialogData.cardId"></el-input>
                </el-form-item>
                <el-form-item label="职位" prop="position">
                    <el-input v-model="dialogData.position"></el-input>
                </el-form-item>
                <div class="a-btn">
                    <el-button type="primary" @click="newAndEditUser">确定</el-button>
                    <el-button @click="dialog = false">取 消</el-button>
                </div>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import axo from "@/assets/js/axo";
import {formatTime} from "@/assets/js/utils";
export default {
    name: "platformUser",
    data () {
        return {
            tableData: [{
                name: '',
                phone: '',
                email: '',
                updateTime: '',
                roleName: ''
            }],
            searchItem: {
                name: ''
            },
            fules: {
                name: [
                    { required: true, message: '用户名不能为空', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '密码不能为空', trigger: 'blur' }
                ],
                phone: [
                    { required: true, message: '手机不能为空' },
                    { type: 'number', message: '只能填写数字', trigger: 'change' }
                ]
            },
            dialog: false,
            editType: '新建',
            dialogData: {
                name: '',
                password: '',
                phone: '',
                email: '',
                cardId: '',
                position: '',
                userNo: ''
            },
            selectItem: [],
            pageNum: 1,
            pageSize: 10,
            total: 0,
            roleList: []
        };
    },
    methods: {
        resetForm (item) {
            this.$refs[item].resetFields();
            this.loadData();
        },
        currentChange (val) {
            this.pageNum = val;
            console.log(`当前页: ${val}`);
            this.loadData(this.searchItem.name, val, this.pageSize);
        },
        sizeChange (val) {
            this.pageSize = val;
            this.loadData(this.searchItem.name, this.pageNum, val);
            console.log(`每页 ${val} 条`,';总数：', this.total);
        },
        delItem (index, rows) {
            console.log(index, rows);
            this.$confirm('是否删除此角色', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                axo({
                    method: 'post',
                    url: '/api-sys/user/del',
                    data: {
                        "platformNo": "1",
                        "body": {
                            userNo: rows.userNo
                        }
                    }
                }).then((res) => {
                    console.log(res);
                    if(res.data.state.code === "200"){
                        this.$message({
                            message: '删除成功',
                            type: 'success',
                            duration: 800
                        });
                        this.dialog = false;
                        this.loadData(this.searchItem.name, this.pageNum, this.pageSize);
                    }else{
                        this.$message({
                            message: res.data.state.message,
                            type: 'error',
                            duration: 800
                        });
                    }
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        openDislog (index, row, type) {
            let message = '';
            if(type === 'new'){
                this.dialogData = {};
                this.dialog = true;
                this.editType = '新建';
            }
            if(type === 'edit'){
                this.dialogData = Object.assign({}, row);
                this.dialog = true;
                this.editType = '修改';
            }
        },
        newAndEditUser () {
            this.$refs['dialogForm'].validate((valid) => {
                if (!valid) {
                    this.$message({
                        message: '请完整填写信息',
                        type: 'warning',
                        duration: 1200
                    });
                    return false;
                }else{
                    let formData = this.dialogData;
                    let url = '';
                    let params = {};
                    if(this.editType === '新建'){
                        url = '/api-sys/user/add';
                        params = {
                            password: formData.password,
                            name: formData.name,
                            phone: formData.phone,
                            email: formData.email,
                            cardId: formData.cardId,
                            position: formData.position
                        };
                    }
                    if(this.editType === '修改'){
                        url = '/api-sys/user/update';
                        params = {
                            name: formData.name,
                            email: formData.email,
                            cardId: formData.cardId,
                            position: formData.position,
                            userNo: formData.userNo
                        };
                    }
                    axo({
                        method: 'post',
                        url: url,
                        data: {
                            "platformNo": "1",
                            "body": params
                        }
                    }).then((res) => {
                        console.log(res);
                        if(res.data.state.code === "200"){
                            this.$message({
                                message: this.editType+'成功',
                                type: 'success',
                                duration: 800
                            });
                            this.dialogData ={
                                name: '',
                                password: '',
                                phone: '',
                                email: '',
                                cardId: '',
                                position: '',
                                userNo: ''
                            };
                            this.dialog = false;
                            this.loadData();
                        }else{
                            this.$message({
                                message: res.data.state.message,
                                type: 'error',
                                duration: 800
                            });
                        }
                    });
                }
            });
        },
        async loadData (name=this.searchItem.name, pageNum=this.pageNum, pageSize=this.pageSize) {
            await axo({
                method: 'post',
                url: '/api-sys/user/getUserList',
                data: {
                    "platformNo": "1",
                    "body": {
                        name: name,
                        pageNum: pageNum,
                        pageSize: pageSize
                    }
                }
            }).then((res) => {
                console.log(res);
                console.log(JSON.parse(res.data.ciphertext));

                let ciphertext = JSON.parse(res.data.ciphertext);
                this.tableData = ciphertext.list;
                this.total = ciphertext.total;
                this.tableData = this.tableData.map((ele,i) => {
                    ele.updateTime = formatTime(ele.updateTime);
                    return ele;
                });
            });
        },
        loadRoleData (name='', pageNum=1, pageSize=100) {
            axo({
                method: 'post',
                url: '/api-sys/role/queryRoleList',
                data: {
                    "platformNo": "1",
                    "body": {
                        "name": name,
                        "pageNum": pageNum,
                        "pageSize": pageSize
                    }
                }
            }).then((res) => {
                let ciphertext = JSON.parse(res.data.ciphertext);
                this.roleList = ciphertext.list;
            }).catch((error) => {
                console.log("error:", error);
            });
        },
        handleCommand(roleItem, row) {
            console.log(roleItem, row);
            this.$confirm('是否修改此用户角色', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                axo({
                    method: 'post',
                    url: '/api-sys/userRole/addOrUpdate',
                    data: {
                        "platformNo": "1",
                        "body": {
                            userNo: row.userNo,
                            roleNo: roleItem.roleNo,
                            roleName: roleItem.name,
                            remark: ""
                        }
                    }
                }).then((res) => {
                    console.log(res);
                    if(res.data.state.code === "200"){
                        this.$message({
                            message: '绑定角色成功',
                            type: 'success',
                            duration: 800
                        });
                        this.loadData(this.searchItem.name, this.pageNum, this.pageSize);
                    }else{
                        this.$message({
                            message: res.data.state.message,
                            type: 'error',
                            duration: 800
                        });
                    }
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        }
    },
    mounted () {
        this.$nextTick(function () {
            this.loadData(this.searchItem.name, this.pageNum, this.pageSize);
            this.loadRoleData();
        });
    }
};
</script>

<style lang="scss">
    #platformUser{
        .m-search-box{
            border: 1px solid #eee;
            margin:20px;
            padding:22px 0 0 20px;
            min-width: 1200px;
            box-sizing: border-box;
            .search-in{
                .search-item{
                    margin-right: 30px;
                }
            }
        }
        .table-box{
            border: 1px solid #eee;
            margin:20px;
            min-width: 1200px;
        }
        .page{
            text-align: right;
            padding: 10px;
            .el-pagination{
                padding:0;
            }
        }
        .operate-btn{
            margin: 40px 20px 20px;
        }
        .a-btn{
            margin-top: 20px;
            text-align: center;
        }
        .el-g-tbn{
            text-align: center;
        }
    }
</style>
<style lang="scss" scoped>
    .el-dropdown-menu {
        max-height: 300px;
        overflow: auto;
    }
    .el-dropdown-link {
        cursor: pointer;
    }
</style>
